<template>
  <div>
    <div class="emp-header-container">
      <div>
        <el-input prefix-icon="el-icon-search"
                  class="emp-search-input"
                  v-model="empName"
                  @keydown.enter.native="initEmps"
                  clearable
                  @clear="initEmps"
                  placeholder="请输入员工名进行搜索"></el-input>
        <el-button type="primary"
                   @click="initEmps"
                   icon="el-icon-search">搜索</el-button>
        <el-button type="primary" icon="el-icon-caret-bottom">高级搜索</el-button>
      </div>
      <div class="emp-header-operations-container">
        <el-button type="success" icon="el-icon-upload2">导入数据</el-button>
        <el-button type="success" icon="el-icon-download">导出数据</el-button>
        <el-button type="primary"
                   @click="showAddEmpView"
                   icon="el-icon-plus">添加员工</el-button>
      </div>
    </div>
    <div class="emp-table-container">
      <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              :data="emps"
              size="medium"
              stripe
              border
              style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                fixed="left"
                width="70">
        </el-table-column>
        <el-table-column
                prop="workId"
                label="工号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别"
                width="50">
        </el-table-column>
        <el-table-column
                prop="birthday"
                label="出生日期"
                width="110">
        </el-table-column>
        <el-table-column
                prop="idCard"
                label="身份证号码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="wedlock"
                label="婚姻状况"
                width="80">
        </el-table-column>
        <el-table-column
                prop="nation.name"
                label="民族"
                width="50">
        </el-table-column>
        <el-table-column
                prop="nativePlace"
                label="籍贯"
                width="80">
        </el-table-column>
        <el-table-column
                prop="politicsStatus.name"
                label="政治面貌"
                width="120">
        </el-table-column>
        <el-table-column
                prop="email"
                label="电子邮件"
                width="180">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="联系地址"
                width="270">
        </el-table-column>
        <el-table-column
                prop="joblevel.name"
                label="职称"
                width="110">
        </el-table-column>
        <el-table-column
                prop="department.name"
                label="所属部门"
                width="100">
        </el-table-column>
        <el-table-column
                prop="position.name"
                label="职位"
                width="100">
        </el-table-column>
        <el-table-column
                prop="engageForm"
                label="聘用形式"
                width="80">
        </el-table-column>
        <el-table-column
                prop="tiptopDegree"
                label="最高学历"
                width="80">
        </el-table-column>
        <el-table-column
                prop="school"
                label="毕业院校"
                width="150">
        </el-table-column>
        <el-table-column
                prop="specialty"
                label="专业"
                width="150">
        </el-table-column>
        <el-table-column
                prop="workState"
                label="在职状态"
                width="80">
        </el-table-column>
        <el-table-column
                prop="workState"
                label="在职状态"
                width="80">
        </el-table-column>
        <el-table-column
                prop="beginDate"
                label="入职日期"
                width="105">
        </el-table-column>
        <el-table-column
                prop="conversionTime"
                label="转正日期"
                width="105">
        </el-table-column>
        <el-table-column
                prop="beginContract"
                label="合同起始日期"
                width="115">
        </el-table-column>
        <el-table-column
                prop="endContract"
                label="合同截止日期"
                width="115">
        </el-table-column>
        <el-table-column
                label="合同期限"
                width="105">
          <template slot-scope="scope">
            <span>{{scope.row.contractTerm}}年</span>
          </template>
        </el-table-column>
        <el-table-column
                label="操作"
                fixed="right"
                width="280"
                class="emp-table-operation">
          <template slot-scope="scope">
            <el-button size="mini" @click="showEditEmpView(scope.row)">编辑</el-button>
            <el-button type="primary" size="mini">查看高级资料</el-button>
            <el-button type="danger"
                       @click="deleteEmp(scope.row)"
                       size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="emp-pagination-container">
        <!--Pagination 分页-->
        <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="sizes, prev, pager, next, jumper, ->, total, slot"
                :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="80%">
      <div>
        <el-form ref="empForm"
                 :rules="rules"
                 :model="emp">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="姓名 : " prop="name">
                <el-input v-model="emp.name"
                          prefix-icon="el-icon-edit"
                          placeholder="请输入员工姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="性别 : " prop="gender">
                <!--Radio 单选框-->
                <el-radio-group v-model="emp.gender">
                  <el-radio-button label="男">男</el-radio-button>
                  <el-radio-button label="女">女</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期 : " prop="birthday">
                <!--DatePicker 日期选择器-->
                <el-date-picker
                        v-model="emp.birthday"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择出生日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="政治面貌 : " prop="politicId">
                <!--Select 选择器-->
                <el-select v-model="emp.politicId" placeholder="请选择政治面貌">
                  <el-option
                          v-for="item in politicsstatus"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="民族 : " prop="nationId">
                <!--Select 选择器-->
                <el-select v-model="emp.nationId" placeholder="请选择民族">
                  <el-option
                          v-for="item in nations"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="籍贯 : " prop="nativePlace">
                <el-input v-model="emp.nativePlace"
                          prefix-icon="el-icon-edit"
                          placeholder="请输入籍贯"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱 : " prop="email">
                <el-input v-model="emp.email"
                          prefix-icon="el-icon-message"
                          placeholder="请输入邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系地址 : " prop="address">
                <el-input v-model="emp.address"
                          prefix-icon="el-icon-s-home"
                          placeholder="请输入联系地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="职位 : " prop="posId">
                <!--Select 选择器-->
                <el-select v-model="emp.posId" placeholder="请选择职位">
                  <el-option
                          v-for="item in positions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职称 : " prop="jobLevelId">
                <!--Select 选择器-->
                <el-select v-model="emp.jobLevelId" placeholder="请选择职称">
                  <el-option
                          v-for="item in joblevels"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门 : " prop="departmentId">
                <el-popover
                        placement="bottom"
                        title="请选择所属部门"
                        width="200"
                        trigger="click"
                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                        v-model="depVisible">
                  <el-tree :data="allDeps"
                           :props="defaultProps"
                           :default-expand-all="true"
                           @node-click="handleNodeClick"></el-tree>
                  <div @click="showDepView"
                       class="add-department"
                       slot="reference">{{inputDepName}}
                  </div>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话号码 : " prop="phone">
                <el-input v-model="emp.phone"
                          prefix-icon="el-icon-phone"
                          placeholder="请输入电话号码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="工号 : " prop="workId">
                <el-input v-model="emp.workId"
                          disabled
                          prefix-icon="el-icon-edit"
                          placeholder="请输入工号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="最高学历 : " prop="tiptopDegree">
                <!--Select 选择器-->
                <el-select v-model="emp.tiptopDegree" placeholder="请选择最高学历">
                  <el-option
                          v-for="item in tiptopDegrees"
                          :key="item"
                          :label="item"
                          :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校 : " prop="school">
                <el-input v-model="emp.school"
                          prefix-icon="el-icon-edit"
                          placeholder="请输入毕业院校"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="专业名称 : " prop="specialty">
                <el-input v-model="emp.specialty"
                          prefix-icon="el-icon-edit"
                          placeholder="请输入专业名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="入职日期 : " prop="beginDate">
                <!--DatePicker 日期选择器-->
                <el-date-picker
                        v-model="emp.beginDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择入职日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="转正日期 : " prop="conversionTime">
                <!--DatePicker 日期选择器-->
                <el-date-picker
                        v-model="emp.conversionTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择转正日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同起始日期 : " prop="beginContract">
                <!--DatePicker 日期选择器-->
                <el-date-picker
                        v-model="emp.beginContract"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择合同起始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同截止日期 : " prop="endContract">
                <!--DatePicker 日期选择器-->
                <el-date-picker
                        v-model="emp.endContract"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择合同截止日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="身份证号码 : " prop="idCard">
                <el-input v-model="emp.idCard"
                          prefix-icon="el-icon-edit"
                          placeholder="请输入身份证号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用形式 : " prop="engageForm">
                <!--Radio 单选框-->
                <el-radio-group v-model="emp.engageForm">
                  <el-radio-button label="劳动合同">劳动合同</el-radio-button>
                  <el-radio-button label="劳务合同">劳务合同</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况 : " prop="wedlock">
                <!--Radio 单选框-->
                <el-radio-group v-model="emp.wedlock">
                  <el-radio-button label="已婚">已婚</el-radio-button>
                  <el-radio-button label="未婚">未婚</el-radio-button>
                  <el-radio-button label="离异">离异</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddUpdateEmp">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "EmpBasic",
    data() {
      return {
        emps: [],
        loading: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        title: '',
        inputDepName: '',
        allDeps: [],
        total: 0,
        currentPage: 1,
        size: 10,
        empName: '',
        dialogVisible: false,
        depVisible: false,
        nations: [],
        joblevels: [],
        positions: [],
        deps: [],
        politicsstatus: [],
        tiptopDegrees: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
        emp: {
          id: null,
          name: '',
          gender: '',
          birthday: '',
          idCard: '',
          wedlock: '',
          nationId: null,
          nativePlace: '',
          politicId: null,
          email: '',
          phone: '',
          address: '',
          departmentId: null,
          jobLevelId: null,
          posId: null,
          engageForm: '',
          tiptopDegree: '',
          specialty: '',
          school: '',
          beginDate: '',
          workState: '在职',
          workId: '',
          contractTerm: null,
          conversionTime: '',
          notWorkDate: null,
          beginContract: '',
          endContract: '',
          workAge: null,
          salaryId: null
        },
        rules: {
          name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
          gender: [{ required: true, message: '请输入员工性别', trigger: 'blur' }],
          birthday: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
          idCard: [
              { required: true, message: '请输入身份证号码', trigger: 'blur' },
              { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入身份证号码', trigger: 'blur' }
              ],
          wedlock: [{ required: true, message: '请输入婚姻状况', trigger: 'blur' }],
          nationId: [{ required: true, message: '请输入民族', trigger: 'blur' }],
          nativePlace: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
          politicId: [{ required: true, message: '请输入政治面貌', trigger: 'blur' }],
          email: [
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type:'email', required: true, message: '邮箱地址格式不正确', trigger: 'blur' },
            ],
          phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
          address: [{ required: true, message: '请输入员工地址', trigger: 'blur' }],
          departmentId: [{ required: true, message: '请输入员工部门', trigger: 'blur' }],
          jobLevelId: [{ required: true, message: '请输入员工职称', trigger: 'blur' }],
          posId: [{ required: true, message: '请输入员工职位', trigger: 'blur' }],
          engageForm: [{ required: true, message: '请输入聘用形式', trigger: 'blur' }],
          tiptopDegree: [{ required: true, message: '请输入员工学历', trigger: 'blur' }],
          specialty: [{ required: true, message: '请输入专业', trigger: 'blur' }],
          school: [{ required: true, message: '请输入毕业院校', trigger: 'blur' }],
          beginDate: [{ required: true, message: '请输入入职日期', trigger: 'blur' }],
          workState: [{ required: true, message: '请输入工作状态', trigger: 'blur' }],
          workId: [{ required: true, message: '请输入员工工号', trigger: 'blur' }],
          contractTerm: [{ required: true, message: '请输入合同期限', trigger: 'blur' }],
          conversionTime: [{ required: true, message: '请输入转正日期', trigger: 'blur' }],
          notWorkDate: [{ required: true, message: '请输入离职日期', trigger: 'blur' }],
          beginContract: [{ required: true, message: '请输入合同起始日期', trigger: 'blur' }],
          endContract: [{ required: true, message: '请输入合同截止日期', trigger: 'blur' }],
          workAge: [{ required: true, message: '请输入员工工龄', trigger: 'blur' }]
        }
      }
    },
    mounted() {
      this.initEmps()
      this.initData()
    },
    methods: {
      initEmps() {
        this.loading = true
        this.getRequest('/employee/basic/?currentPage=' + this.currentPage
            + '&size=' + this.size
            + '&name=' + this.empName).then(resp => {
          this.loading = false
          if (resp) {
            this.emps = resp.data
            this.total = resp.total
          }
        })
      },
      currentChange(currentPage) {
        //  这个currentPage是默认传进来的
        this.currentPage = currentPage
        this.initEmps()
      },
      sizeChange(size) {
        this.size = size
        this.currentPage = 1
        this.initEmps()
      },
      showAddEmpView() {
        this.title = '添加员工'
        //  清空因编辑员工按钮留下的数据
        this.emp = {
              id: null,
              name: '',
              gender: '',
              birthday: '',
              idCard: '',
              wedlock: '',
              nationId: null,
              nativePlace: '',
              politicId: null,
              email: '',
              phone: '',
              address: '',
              departmentId: null,
              jobLevelId: null,
              posId: null,
              engageForm: '',
              tiptopDegree: '',
              specialty: '',
              school: '',
              beginDate: '',
              workState: '在职',
              workId: '',
              contractTerm: null,
              conversionTime: '',
              notWorkDate: null,
              beginContract: '',
              endContract: '',
              workAge: null,
              salaryId: null
            }
        this.inputDepName = ''
        this.emp.departmentId = ''
        this.initPositions()
        this.getMaxWorkID()
        this.dialogVisible = true
      },
      initData() {
        if (!window.sessionStorage.getItem('nations')) {
          this.getRequest('/employee/basic/nations').then(resp => {
            if (resp) {
              this.nations = resp
              window.sessionStorage.setItem('nations', JSON.stringify(resp))
            }
          })
        } else {
          this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
        }

        if (!window.sessionStorage.getItem('joblevels')) {
          this.getRequest('/employee/basic/joblevels').then(resp => {
            if (resp) {
              this.joblevels = resp
              window.sessionStorage.setItem('joblevels', JSON.stringify(resp))
            }
          })
        } else {
          this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'))
        }

        if (!window.sessionStorage.getItem('politicsstatus')) {
          this.getRequest('/employee/basic/politicsstatus').then(resp => {
            if (resp) {
              this.politicsstatus = resp
              window.sessionStorage.setItem('politicsstatus', JSON.stringify(resp))
            }
          })
        } else {
          this.politicsstatus = JSON.parse(window.sessionStorage.getItem('politicsstatus'))
        }

        if (!window.sessionStorage.getItem('allDeps')) {
          this.getRequest('/employee/basic/deps').then(resp => {
            if (resp) {
              this.allDeps = resp
              window.sessionStorage.setItem('allDeps', JSON.stringify(resp))
            }
          })
        } else {
          this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'))
        }
      },
      initPositions() {
        this.getRequest('/employee/basic/positions').then(resp => {
          if (resp) {
            this.positions = resp
          }
        })
      },
      getMaxWorkID() {
        this.getRequest('/employee/basic/maxWorkID').then(resp => {
          if (resp) {
            this.emp.workId = resp.obj
          }
        })
      },
      showDepView() {
        this.depVisible = !this.depVisible
      },
      handleNodeClick(data) {
        this.inputDepName = data.name
        this.emp.departmentId = data.id
        this.depVisible = !this.depVisible
      },
      doAddUpdateEmp() {
        if (this.emp.id) {
          //  更新员工
          this.$refs['empForm'].validate((valid) => {
            if (valid) {
              this.putRequest('/employee/basic/', this.emp).then(resp => {
                if (resp) {
                  this.dialogVisible = false
                  this.initEmps()
                }
              })
            }
          })
        } else {
          //  添加员工
          this.$refs['empForm'].validate((valid) => {
            if (valid) {
              this.postRequest('/employee/basic/', this.emp).then(resp => {
                if (resp) {
                  this.dialogVisible = false
                  this.initEmps()
                }
              })
            }
          })
        }
      },
      deleteEmp(data) {
        //  MessageBox 弹框
        this.$confirm('此操作将永久删除[' + data.name + ']员工, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/employee/basic/' + data.id).then(resp => {
            if (resp) {
              this.initEmps()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      showEditEmpView(data) {
        this.title = '编辑员工信息'
        this.inputDepName = data.department.name
        this.emp.departmentId = data.department.id
        this.emp = data
        //  职位的数据没有像民族职称这些放在initData中在mounted的时候就初始化了
        this.initPositions()
        this.dialogVisible = true
      }
    }
  }
</script>

<style>

  .emp-header-container {
    display: flex;
    justify-content: space-between;
  }

  .emp-search-input {
    width: 300px;
    margin-right: 10px;
  }

  .emp-header-operations-container {
  }

  .emp-table-container {
    margin-top: 15px;
  }

  .emp-table-operation {
    display: flex;
  }

  .emp-pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .add-department {
    width: 150px;
    display: inline-flex;
    border: 1px solid #dedede;
    height: 36px;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 12px;
  }
</style>